<template>
  <div class="components-input-demo-presuffix">
    <a-input @click="openModal" :placeholder="placeholder || $t('m.common.label.option_select')" v-model="names" readOnly :disabled="disabled">
      <ych-icon slot="prefix" type="appstore" :title="$t('m.common.label.option_select')"/>
      <ych-icon v-if="value && !disabled" slot="suffix" type="close-circle" @click="handleEmpty" :title="$t('m.common.button.clear')"/>
    </a-input>

    <select-view-table-dialog ref="selectViewDialog" @selectFinished="handleOK" :groupId="groupId"></select-view-table-dialog>
  </div>
</template>

<script>

  import { getAction } from '@/api/manage'
  import SelectViewTableDialog from '../dialog/SelectViewTableDialog'
  import YchConstant from "@/api/YchConstant";

  export default {
    name: 'ViewTableNameTag',
    components: {
      SelectViewTableDialog
    },
    props: {
      placeholder: {
        type: String,
      },
      value: {
        type: String,
        required: false
      },
      disabled: {
        type: Boolean,
        required: false,
        default: false
      },
      radio: {
        type: Boolean,
        required: false,
        default: true
      },
      groupId: {
        type: String,
        required: true
      },
    },
    data () {
      return {
        names: '',
        url: {
          // queryByCode: YchConstant.PREFIX_EFORM + '/manage/actAppObject/queryByCode',
        },
      }
    },
    watch: {
      value: {
        handler () {
          this.initNames()
        },
        immediate: true
      },
    },
    methods: {
      initNames () {
        /*if (this.value && this.value.length > 0) {
          getAction(this.url.queryByCode, { codes: this.value }).then((res) => {
            if (res.success) {
              const rows = res.result
              this.names = rows.map(row => row['objName']).join(',')
            } else {
              this.names = ''
            }
          })
        } else {
          this.names = ''
        }*/
        this.names = this.value
      },
      openModal () {
        this.$refs.selectViewDialog.radio = this.radio
        this.$refs.selectViewDialog.visible = true
      },
      handleOK (selectedRowKeys, selectionRows) {
        let value = ''
        if (selectionRows && selectionRows.length > 0) {
          value = selectionRows.map(row => row['viewCode']).join(',')
        }
        this.$emit('change', value)
      },
      handleEmpty () {
        this.handleOK()
      }
    },
    model: {
      prop: 'value',
      event: 'change'
    }
  }
</script>

<style lang="less" scoped>
  .components-input-demo-presuffix .anticon-close-circle {
    cursor: pointer;
    color: #ccc;
    transition: color 0.3s;
    font-size: 12px;
  }

  .components-input-demo-presuffix .anticon-close-circle:hover {
    color: #f5222d;
  }

  .components-input-demo-presuffix .anticon-close-circle:active {
    color: #666;
  }
</style>
